<template>
	<Form ref="formCom" :validation-schema="mySchema" v-slot="{errors}" autocomplete="off" class="xtx-form">
		<div class="user-info">
			<img :src="avatar" alt="" />
			<p>Hi，{{nickname}} 欢迎来小兔鲜，完成绑定后可以QQ账号一键登录哦~</p>
		</div>

		<div class="xtx-form-item">
			<div class="field">
				<i class="icon iconfont icon-phone"></i>
				<Field :class="{err:errors.mobile}" v-model="form.mobile" name="mobile" class="input" type="text"
					placeholder="绑定的手机号:13666666666" />
			</div>
			<div v-if="errors.mobile" class="error">{{errors.mobile}}</div>
		</div>

		<div class="xtx-form-item">
			<div class="field">
				<i class="icon iconfont icon-code"></i>
				<Field :class="{err:errors.code}" v-model="form.code" name="code" class="input" type="text"
					placeholder="短信验证码" />
				<span @click="send()" class="code">
					{{time===0?'发送验证码':`${time}秒后发送`}}
				</span>
			</div>
			<div v-if="errors.code" class="error">{{errors.code}}</div>
		</div>
		<a @click="submit()" href="javascript:;" class="submit">立即绑定</a>
	</Form>
</template>

<script>
	import QC from 'qc'
	import {
		ref,
		reactive,
		onUnmounted
	} from 'vue'
	import {
		Form,
		Field
	} from 'vee-validate'
	import schema from '@/utils/vee-validate-schema'
	import {
		userQQBindCode,
		userQQBindLogin
	} from '@/api/user'
	import {
		useIntervalFn
	} from '@vueuse/core'
	import Message from '@/components/library/Message'
	import {
		useStore
	} from 'vuex'
	import {
		useRouter
	} from 'vue-router'

	export default {
		props: {
			unionId: {
				type: String,
				default: ''
			}
		},

		components: {
			Form,
			Field
		},

		setup(props) {
			const nickname = ref('null')
			const avatar = ref('null')

			if (QC.Login.check()) {
				QC.api('get_user_info').success(res => {
					avatar.value = res.data.figureurl_1
					nickname.value = res.data.nickname
				})
			}

			const form = reactive({
				mobile: null,
				code: null
			})

			const mySchema = {
				mobile: schema.mobile,
				code: schema.code
			}

			const formCom = ref(null)
			const time = ref(0)
			const {
				pause,
				resume
			} = useIntervalFn(() => {
				time.value--
				if (time.value <= 0) {
					pause()
					time.value = 0
				}
			}, 1000, false)
			onUnmounted(() => {
				pause()
			})

			const send = async () => {
				const valid = mySchema.mobile(form.mobile)
				if (valid === true) {
					if (time.value === 0) {
						await userQQBindCode(form.mobile)
						Message({
							type: 'success',
							text: '发送成功'
						})
						time.value = 60
						resume()
					}
				} else {
					formCom.value.setFieldError('mobile', valid)
				}
			}

			const store = useStore()
			const router = useRouter()
			const submit = async () => {
				const valid = formCom.value.validate()
				if (valid) {
					userQQBindLogin({
						unionId: props.unionId,
						...form
					}).then(data => {
						const {
							id,
							account,
							avatar,
							mobile,
							nickname,
							token
						} = data.result
						store.commit('user/setUser', {
							id,
							account,
							avatar,
							mobile,
							nickname,
							token
						})

						store.dispatch('cart/mergeLocalCart').then(() => {
							router.push(store.state.user.redirectUrl || '/')
							Message({
								type: 'success',
								text: 'QQ绑定成功'
							})
						})

					}).catch(e => {
						Message({
							type: 'error',
							text: '绑定失败'
						})
					})
				}
			}

			return {
				nickname,
				avatar,
				time,
				mySchema,
				formCom,
				form,
				send,
				submit
			}
		}
	}
</script>

<style lang="less" scoped>
	.user-info {
		width: 320px;
		height: 70px;
		margin: 0 auto;
		display: flex;
		background: #f2f2f2;
		align-items: center;
		padding: 0 10px;
		margin-bottom: 25px;

		img {
			background: #f2f2f2;
			width: 50px;
			height: 50px;
		}

		p {
			padding-left: 10px;
		}
	}

	.code {
		position: absolute;
		right: 0;
		top: 0;
		line-height: 50px;
		width: 80px;
		color: #999;

		&:hover {
			cursor: pointer;
		}
	}
</style>
